{% extends "base.html" %}

{% block bodycontent %}
	I only show the shortest formula for a formula using any set of ingredients. For example, if "Sugar, Sugar, Sugar, Ghast Tear" 
	has the same effect as "Sugar, Ghast Tear", I only show the latter. <br>
	To toggle an effect, click  its colored box. <br>
	<span style="background:gray;">Gray means "Don't care". <br></span>
	<span style="background:red;">Red means "Don't show potions with this effect". <br></span>
	<span style="background:green;">Green means "Show potions with this effect." <br></span>
	Results are kind of sorted by potions having the least bad effects first (in terms of Duration * Potency ), but also by shortest formula.<br>
	To build the potion, add the ingredients shown from Left to Right<br>
<a href="{{ url }}">{{ url_linktext }}</a>
<form action="/" method="post">
<div style='float:left;'>
	<h4>Which effects?</h4>
	<script type="text/javascript">
		function setRadio(id)
		{
			document.getElementById(id).checked = true
			return false;
		}
	</script>
    {% for effect in effects %}
	<div class="effect">
	{% if effect.hasval %} 
		<input type="radio" id="{{effect.key}}d" name="{{effect.key }}" {% ifequal effect.care  'd' %}checked {% endifequal %} value="d" class="radio-d">
		<label for="{{effect.key }}d" onclick="return setRadio('{{effect.key}}n')" class='radio-label'>{{ effect.name }}</label>
		<input type="radio" id="{{effect.key}}n" name="{{effect.key }}" {% ifequal effect.care  'n' %}checked {% endifequal %} value="n" class="radio-n">
		<label for="{{effect.key }}n" onclick="return setRadio('{{effect.key}}0')" class='radio-label'>{{ effect.name }}</label>
		<input type="radio" id="{{effect.key}}0" name="{{effect.key }}" {% ifequal effect.care  '0' %}checked {% endifequal %} value="0" class="radio-y">
		<label for="{{effect.key }}0" onclick="return setRadio('{{effect.key}}1')" class='radio-label'>{{ effect.name }} I</label>
		<input type="radio" id="{{effect.key}}1" name="{{effect.key }}" {% ifequal effect.care  '1' %}checked {% endifequal %} value="1" class="radio-y">
		<label for="{{effect.key }}1" onclick="return setRadio('{{effect.key}}2')" class='radio-label'>{{ effect.name }} II</label>
		<input type="radio" id="{{effect.key}}2" name="{{effect.key }}" {% ifequal effect.care  '2' %}checked {% endifequal %} value="2" class="radio-y">
		<label for="{{effect.key }}2" onclick="return setRadio('{{effect.key}}d')" class='radio-label'>{{ effect.name }} III</label>

	{% else %}
		<input type="radio" id="{{effect.key}}d" name="{{effect.key }}" {% ifequal effect.care  'd' %}checked {% endifequal %} value="d" class="radio-d">
		<label for="{{effect.key }}d" onclick="return setRadio('{{effect.key}}n')" class='radio-label'>{{ effect.name }}</label>
		<input type="radio" id="{{effect.key}}n" name="{{effect.key }}" {% ifequal effect.care  'n' %}checked {% endifequal %} value="n" class="radio-n">
		<label for="{{effect.key }}n" onclick="return setRadio('{{effect.key}}y')" class='radio-label'>{{ effect.name }}</label>
		<input type="radio" id="{{effect.key}}y" name="{{effect.key }}" {% ifequal effect.care  'y' %}checked {% endifequal %} value="y" class="radio-y">
		<label for="{{effect.key }}y" onclick="return setRadio('{{effect.key}}d')" class='radio-label'>{{ effect.name }}</label>
	{% endif %}
	</div>
    {% endfor %}
</div>
<div style="margin-left:3em;float:left;">
	<h4>Which ingredients?</h4>
    {% for ingred in ingredients %}
			<input type="checkbox" id="{{ingred.key}}" name="{{ ingred.key }}" {% if ingred.check %}checked {% endif %} class="check-with-label">
			<label for="{{ingred.key}}" class="label-for-check">{{ ingred.name }}</label><br>
    {% endfor %}
</div> 

<div style="clear:both;">
	<input style="clear:both;" type="Submit"><br> 
</div>
    </form>
	{% endblock bodycontent %}
	
